<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0 minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>问卷添加</title>
    <link href="public/css/header.css" rel="stylesheet" type="text/css">
    <link href="public/css/container.css" rel="stylesheet" type="text/css">
    <script src="../public/jQuery/jQuery-2.1.3.min.js"></script>
    <script src="../public/js/publicjs.js"></script>
    <script src="public/js/myjs/whole.js"></script>
    <script>

    </script>
    <style>
        .text_div_title {
            position: relative;
            /*padding-top: 1rem;*/
            /*font-size: 3rem;*/
            padding-top: 0.9375vh;
            font-size: 2.8125vh;
            text-align: center;
            color: #323232;
            /*line-height: 4.296vh;*/
        }

        .text_div_wlecome {
            border-bottom: 1px solid #E6E6E6;
            color: #808080;
            position: relative;
            /*padding-left: 2rem;*/
            /*padding-bottom: 1rem;*/
            padding-left: 1.875vh;
            padding-bottom: 0.9375vh;
        }

        .subjects {
            position: relative;
            /*top:1.875vh;*/
        }

        .subjects .subject {
            border-bottom: 1px solid #E6E6E6;
        }

        .subject_edit {
            position: relative;
            height: 9.375vh;
            /*height: 10rem;*/
            background: #CCCCCC;
            display: none;
        }

        .subject + .subject {
            border-top: 0px solid #E6E6E6;
        }

        .subject_title {
            position: relative;
            /*height: 10rem;*/
            height: 9.375vh;
            line-height: 4.296vh;
        }

        .subjects .subject .title {
            position: relative;
            /*height: 5rem;*/
            /*line-height: 6rem;*/
            /*margin-left: 2rem;*/

            height: 4.6875vh;
            line-height: 5.625vh;
            margin-left: 1.875vh;
            color: #323232;

        }

        .subjects .subject .type {
            position: relative;
            /*height: 5rem;*/
            /*line-height: 4rem;*/
            /*font-size: 2.167rem;*/
            /*margin-left:  2rem;*/
            height: 4.6875vh;
            line-height: 3.75vh;
            font-size: 2.03125vh;
            margin-left: 1.875vh;
            color: #808080;

        }

        .subjects .subject_edit .modify {
            width: 25%;
            text-align: center;
            float: left;
        }

        .subjects .subject_edit .modify2 {
            width: 25%;
            text-align: center;
            float: left;
        }

        .subjects .subject_edit .modify2 img {
            /*width:4.5rem;*/
            /*height:4.83rem;*/
            /*line-height: 4.58rem;*/
            /*padding-top: 1rem;*/
            width: 4.21875vh;
            height: 4.53125vh;
            line-height: 4.296vh;
            padding-top: 0.9375vh;

            display: block;
            margin: 0 auto;

        }

        .opertion {
            color: #FFFFFF;
            font-size: 1.5625vh;
            padding-top: 0.9375vh;
            /*padding-top: 1rem;*/
            /*font-size: 1.667rem;*/
        }

        .popview .popview_btn {
            float: left;
            width: 33.3%;
            text-align: center;
            height: 19vh;
        }

        .popview .popview_btn button {
            display: inline-block;
        }

        .popview .popview_btn .type {
            color: #646464;
            font-size: 2.03125vh;
        }

        .popview .popview_btn img {
            height: 11vh;
            width: 11vh;
        }

        .popview .close {
            text-align: center;
            margin-top: 5vh;
            margin-bottom: 5vh;
        }

        .popview .close img {
            width: 3.4375vh;
            height: 3.4375vh;
        }

        .text_no_more {
            position: relative;
            text-align: center;
            color: #B2B2B2;
            /*padding:2vh;*/
        }

        .div_add_pic {
            /*margin: 0 auto;*/
            position: relative;
            text-align: center;
            margin-top: 2.34375vh;
            margin-bottom: 3.34375vh;
        }

        .add_pic {
            float: left;
            text-align: right;
            width: 45%;
        }

        .add_pic img {
            /*width: 3.33rem;*/
            /*height: 3.33rem;*/
            width: 3.125vh;
            height: 3.125vh;
        }

        .add_text {
            width: 50%;
            color: #F58F62;
            float: left;
            text-align: left;
            /*margin-left: 1rem;*/
            /*line-height: 3.75rem;*/
            margin-left: 0.9375vh;
            line-height: 3.5vh;
        }

        .popview {
            width: 100%;
            height: 0vh;
            position: fixed;
            right: 0;
            bottom: 0px;
            z-index: 999;
            background: white;
            display: none;
        }

        .popview .popview_1 {
            height: 38vh;
        }

        /*撤销*/
        .call_back {
            display: none;
            position: absolute;
            z-index: 99;
            width: 100%;
            height: 100vh;
            padding-top: 38vh;
            background: rgba(0, 0, 0, 0.4);
        }

        .content_big {
            width: 83.33vw;
            height: 15.625vh;
            margin-left: 8.333vw;
            background: white;
            border-radius: 15px;
        }

        .more_again {
            width: 83.33vw;
            margin-left: 8.333vw;
            background: white;
            border-radius: 15px;
            height: 23.4375vh;
        }

        .popup_similar {
            width: 100%;
            height: 7.8125vh;
            line-height: 7.8125vh;
            font-size: 4.5vw;
            text-align: center;
            border-bottom: 1px solid lightgrey;
            color: black;
        }

        .choice_big {
            width: 100%;
            height: 7.8125vh;
        }

        .okCancel {
            width: 100%;
            height: 7.8125vh;
        }

        .only_cancel {
            width: 100%;
            height: 7.8125vh;
            font-size: 4.5vw;
            color: #1091FF;
            line-height: 7.8125vh;
            text-align: center;
        }

        .choice_it {
            width: 49%;
            height: 100%;
            font-size: 4.5vw;
            color: #1091FF;
            line-height: 7.8125vh;
            text-align: center;
            float: left;
        }

        .call_back_success {
            display: none;
            width: 55.56vw;
            height: 7.8125vh;
            background-color: #333333;
            border-radius: 15px;
            font-size: 4.5vw;
            line-height: 7.8125vh;
            padding-left: 2vw;
            color: white;
            margin-left: 23vw;
        }
    </style>
</head>
<body>
<header>
    <div class="header__box tl">

        <img class="toback" src="public/img/basic/back.png"/>
        <span class="toback back">返回</span>

    </div>
    <div class="header__box tc header__box__title">
        编辑问卷
    </div>
    <div class="header__box tr">

        <span class="newCreate">
           下一步
        </span>

    </div>

    <div class="call_back" style="display: none;" data-type="1" data-questionnaire_id="1" data-questionnaire_title="">
        <div class="content_big">
            <div class="popup_similar title_big">

            </div>
            <div class="choice_big">
                <div class="okCancel">
                    <div class="choice_it cancel" style="border-right: 1px solid lightgrey;width: 49%;">取消</div>
                    <div class="choice_it" id="sure">确定</div>
                </div>
            </div>
        </div>
    </div>

</header>
<section>

    <div class="text_div_title">

    </div>

    <div class="text_div_wlecome">
        <span class="text_div_wlecome_span">

        </span>
    </div>
    <div class="subjects">

    </div>
    <div class="text_no_more">
        <img class="loading" src='public/img/basic/loading.gif'>
    </div>

    <div class="div_add_pic">
        <div class="add_pic">
            <img onclick="popover()" src="public/img/edit/edit_add.png">
        </div>

        <div class="add_text">
            <span onclick="popover()">添加题目</span>
        </div>
        <div style="clear: both;">

        </div>
    </div>
    <a name="zhidao"></a><!--锚点处-->

    <div class="popview">
        <div class="popview_1">
        </div>
        <div style="margin:0 4vw;">
            <div class="popview_btn">
                <img class="add_question" data-type="0" src="public/img/choosetype/single.png">
                <div class="type">
                    单选题
                </div>
            </div>

            <div class="popview_btn">
                <img class="add_question" data-type="1" src="public/img/choosetype/multiple.png">
                <div class="type">
                    多选题
                </div>
            </div>

            <div class="popview_btn">
                <img class="add_question" data-type="2" src="public/img/choosetype/blank.png">
                <div class="type">
                    填空题
                </div>
            </div>

            <div class="popview_btn">
                <img class="add_question" data-type="3" src="public/img/choosetype/grade.png">
                <div class="type">
                    打分题
                </div>
            </div>

            <div class="popview_btn">
                <img class="add_question" data-type="4" src="public/img/choosetype/date.png">
                <div class="type">
                    日期
                </div>
            </div>

            <div class="popview_btn">
                <img class="add_question" data-type="5" src="public/img/choosetype/time.png">
                <div class="type">
                    时间
                </div>
            </div>
        </div>

        <div style="clear: both;">
        </div>
        <div class="close">
            <img onclick="popClose();" src="public/img/choosetype/close.png">
        </div>

        <input type="hidden" id="questionnaire_id"/>
        <input type="hidden" id="questionnaire_name" value="0"/>
        <input type="hidden" id="questionnaire_welcome" value="0"/>
        <input type="hidden" id="type" value="0"/>

    </div>

</section>

</body>
</html>
<script>

    $(function () {

        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        };

        $('body').animate({scrollTop: $(document).height()}, 300);

        //进入页面,首先拿到传过来的questionnaire_id
        var questionnaire_id = $.getUrlParam('questionnaire_id');
        var type = $.getUrlParam('type');
        var questionnaire_name = unescape($.getUrlParam('questionnaire_name'));
        var questionnaire_welcome = unescape($.getUrlParam('questionnaire_welcome'));

        questionnaire_name=INPUTEncode(questionnaire_name);
        questionnaire_welcome=INPUTEncode(questionnaire_welcome);

        $(".toback").on('click', function () {
            var type = $("#type").val();
            if (type == 1) {
                location.href = 'index2.html';
            }
            else {
                location.href = 'add.html?questionnaire_id=' + questionnaire_id + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome);
            }
        });

        $('.text_div_title').text(questionnaire_name);
        $('.text_div_wlecome_span').text(questionnaire_welcome);

        $('#questionnaire_name').val(questionnaire_name);
        $('#questionnaire_welcome').val(questionnaire_welcome);
        $("#questionnaire_id").val(questionnaire_id);
        $("#type").val(type);

        $('.text_div_title').click(function(){
            location.href = 'add.html?questionnaire_id=' + questionnaire_id + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome);
        });
        $('.text_div_wlecome').click(function(){
            location.href = 'add.html?questionnaire_id=' + questionnaire_id + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome);

        });

        API_Func('/questionnaires/questionnaireQuestion/list', 'GET', {questionnaire_id: questionnaire_id}, true, function () {

        }, function (d) {
            //成功之后的操作
            if (d.code == 0) {
                var html = '';
                if (d.data.length > 0) {
                    for (var i = 0; i < d.data.length; i++) {
                        html += ' <div class="subject" data-question_id="' + d.data[i].question_id + '" data-question_type="' + d.data[i].question_type + '" data-sequence="' + d.data[i].sequence + '">' +
                                '<div class="subject_title">' +
                                '<div class="title">' + d.data[i].question_body;
                        if (d.data[i].is_necessary == 1) {
                            html += '<span style="color: red;">*</span>';
                        }
                        html += '</div>';
                        if (d.data[i].question_type == 0) {
                            html += '<div class="type">(单选题)</div>';
                        }
                        else if (d.data[i].question_type == 1) {
                            html += '<div class="type">(多选题)</div>';
                        }
                        else if (d.data[i].question_type == 2) {
                            html += '<div class="type">(填空题)</div>';
                        }
                        else if (d.data[i].question_type == 3) {
                            html += '<div class="type">(打分题)</div>';
                        }
                        else if (d.data[i].question_type == 4) {
                            html += '<div class="type">(日期题)</div>';
                        }
                        else if (d.data[i].question_type == 5) {
                            html += '<div class="type">(时间题)</div>';
                        }

                        html += '</div>' +
                                '<div class="subject_edit">' +
                                '<div class="modify2 modify2_edit" data-question_id="' + d.data[i].question_id + '">' +
                                '<img src="public/img/edit/edit_edit.png">' +
                                '<div  class="opertion">' +
                                '编辑' +
                                '</div>' +
                                '</div>' +
                                '<div class="modify2 modify2_up">' +
                                '<img src="public/img/edit/edit_up.png">' +
                                '<div  class="opertion">' +
                                '上移' +
                                '</div>' +
                                '</div>' +
                                '<div class="modify2 modify2_down">' +
                                '<img src="public/img/edit/edit_down.png">' +
                                '<div class="opertion">下移</div> </div>' +

                                '<div class="modify2 modify2_delete">' +
                                '<img src="public/img/edit/edit_delete.png">' +
                                '<div  class="opertion">删除 </div></div>' +
                                '</div>' +
                                '</div>';
                    }
                }
                $('.subjects').append(html);

                $(".subject .subject_title").on('click', function () {
                    var d = $(this).next('.subject_edit').css('display');
                    if (d == 'block') {
                        $(this).next('.subject_edit').hide();
                    }
                    else {
                        $(this).next('.subject_edit').show();
                        $(this).parent().siblings().children('.subject_edit').hide();
                    }
                });

                //编辑
                $(".modify2_edit").click(function () {

                    var question_id = $(this).parents('.subject').attr('data-question_id');
                    var question_type = $(this).parents('.subject').attr('data-question_type');
                    var sequence = $(this).parents('.subject').attr('data-sequence');

                    var questionnaire_name = $('#questionnaire_name').val();
                    var questionnaire_welcome = $('#questionnaire_welcome').val();
                    var typeUrl = $('#type').val();

                    if (question_type == 0) {
                        location.href = "single1.html?sequence=" + sequence + "&questionnaire_id=" + questionnaire_id + "&question_id=" + question_id + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome)+"&type="+typeUrl;
                    }
                    else if (question_type == 1) {
                        location.href = "multiple2.html?sequence=" + sequence + "&questionnaire_id=" + questionnaire_id + "&question_id=" + question_id + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome)+"&type="+typeUrl;
                    }
                    else if (question_type == 2) {
                        location.href = "grade3.html?sequence=" + sequence + "&questionnaire_id=" + questionnaire_id + "&question_id=" + question_id + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome)+"&type="+typeUrl;
                    }
                    else if (question_type == 3) {
                        location.href = "score4.html?sequence=" + sequence + "&questionnaire_id=" + questionnaire_id + "&question_id=" + question_id + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome)+"&type="+typeUrl;
                    }
                    else if (question_type == 4) {
                        location.href = "date5.html?sequence=" + sequence + "&questionnaire_id=" + questionnaire_id + "&question_id=" + question_id + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome)+"&type="+typeUrl;
                    }
                    else if (question_type == 5) {
                        location.href = "time6.html?sequence=" + sequence + "&questionnaire_id=" + questionnaire_id + "&question_id=" + question_id + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome)+"&type="+typeUrl;
                    }

                });

                //上移
                $(".modify2_up").click(function () {

                    //拿到当前对象
                    var current = $(this).parents('.subject');

                    //拿到前面的对象
                    var pre = $(this).parents('.subject').prev();

                    //拿到当前题目的排序
                    var current_sequence = $(this).parents('.subject').attr('data-sequence');

                    //拿到当前题目的id
                    var current_question_id = $(this).parents('.subject').attr('data-question_id');

                    //拿到前面题目的排序
                    var pre_sequence = $(this).parents('.subject').prev().attr('data-sequence');

                    var pre_question_id = $(this).parents('.subject').prev().attr('data-question_id');

                    //问题排序手动互换
                    $(this).parents('.subject').attr('data-sequence', pre_sequence);
                    $(this).parents('.subject').prev().attr('data-sequence', current_sequence);

                    //互换位置
                    current.insertBefore(pre);

                    var jsonString = current_question_id + ':' + pre_sequence + ',' + pre_question_id + ':' + current_sequence;

                    API_Func('/questionnaires/questionnaireQuestion/sequence', 'put', {jsonString: jsonString}, false, function () {

                    }, function (d) {

                    });

                });

                //下移
                $(".modify2_down").click(function () {

                    //拿到当前对象
                    var current = $(this).parents('.subject');

                    //拿到后面的对象
                    var next = $(this).parents('.subject').next();

                    //拿到当前题目的排序
                    var current_sequence = $(this).parents('.subject').attr('data-sequence');

                    //拿到当前题目的id
                    var current_question_id = $(this).parents('.subject').attr('data-question_id');

                    //拿到后面题目的排序
                    var pre_sequence = $(this).parents('.subject').next().attr('data-sequence');

                    var pre_question_id = $(this).parents('.subject').next().attr('data-question_id');

                    //问题排序手动互换
                    $(this).parents('.subject').attr('data-sequence', pre_sequence);
                    $(this).parents('.subject').next().attr('data-sequence', current_sequence);

                    //互换位置
                    current.insertAfter(next);

                    var jsonString = current_question_id + ':' + pre_sequence + ',' + pre_question_id + ':' + current_sequence;

                    API_Func('/questionnaires/questionnaireQuestion/sequence', 'put', {jsonString: jsonString}, false, function () {

                    }, function (d) {

                    });

                });

                //删除
                $(".modify2_delete").click(function () {

                    var question_id = $(this).parents('.subject').attr('data-question_id');

                    $('.call_back').attr('data-type', '0');//表示删除;
                    $('.call_back').attr('data-question_id', question_id);//表示问卷id
                    $('.title_big').text('确认删除此题目吗?');
                    $('.call_back').css('display', 'block');

                });
            }
        });
        //跳转到问题界面
        $('.add_question').click(function () {
            var type = $(this).attr('data-type');
            var sequence = $('.subjects .subject').length + 1;
            var questionnaire_id = $("#questionnaire_id").val();

            var questionnaire_name = $('#questionnaire_name').val();
            var questionnaire_welcome = $('#questionnaire_welcome').val();

            var typeUrl=$("#type").val();

            //单选题
            if (type == 0) {
                location.href = "single1.html?sequence=" + sequence + "&questionnaire_id=" + questionnaire_id + "&question_id=-1" + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome)+"&type="+typeUrl;
            }
            else if (type == 1) {
                location.href = "multiple2.html?sequence=" + sequence + "&questionnaire_id=" + questionnaire_id + "&question_id=-1" + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome)+"&type="+typeUrl;
            }
            else if (type == 2) {
                location.href = "grade3.html?sequence=" + sequence + "&questionnaire_id=" + questionnaire_id + "&question_id=-1" + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome)+"&type="+typeUrl;
            }
            else if (type == 3) {
                location.href = "score4.html?sequence=" + sequence + "&questionnaire_id=" + questionnaire_id + "&question_id=-1" + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome)+"&type="+typeUrl;
            }
            else if (type == 4) {
                location.href = "date5.html?sequence=" + sequence + "&questionnaire_id=" + questionnaire_id + "&question_id=-1" + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome)+"&type="+typeUrl;
            }
            else if (type == 5) {
                location.href = "time6.html?sequence=" + sequence + "&questionnaire_id=" + questionnaire_id + "&question_id=-1" + "&questionnaire_name=" + escape(questionnaire_name) + "&questionnaire_welcome=" + escape(questionnaire_welcome)+"&type="+typeUrl;
            }
        });
    });

    function popClose() {
        $('.popview').animate({height: '0vh'}, [1000]);
        setTimeout("remainTime()", 1000);
    }
    function remainTime() {
        $('.popview').css('display', 'none');
    }

    function popover() {
        $('.popview').css('display', 'block');
        $('.popview').animate({height: '93vh'}, [1000]);
    }

    //删除-取消
    $('.cancel').on('click', function () {
        $('.call_back').css('display', 'none');
    });

    //删除-确定
    $('#sure').on('click', function () {

        var question_id = $(this).parents('.call_back').attr('data-question_id');

        //做删除操作
        API_Func('/questionnaires/questionnaireQuestion/' + question_id, 'DELETE', false, {id: question_id}, function () {

        }, function (d) {
            if (d.code == 0) {
                $('.call_back').css('display', 'none');
                location.reload();
            }
        });
    });

    //跳转到预览页面
    $('.newCreate').click(function () {
        var questionnaire_id = $("#questionnaire_id").val();
        location.href = 'preview.html?questionnaire_id=' + questionnaire_id;
    });


</script>